<style type="text/css">
    body, html, #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>
<link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>
<title>地图展示</title>

<div class="layui-fluid">
    <div class="layui-card" style="align-content: center;">
        <div id="allmap" style="width: 1660px;height: 810px;"></div>
    </div>
</div>

<script type="text/javascript">
    window.HOST_TYPE='2'
    layui.use(['form', 'table', 'util', 'admin', 'element', 'loadScript'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var element = layui.element;
        var loadScript = layui.loadScript;


        // 定义需要动态引入的js文件列表
        var scriptArr = [
            'https://api.map.baidu.com/getscript?v=2.0&ak=AvEGtH6xouSXyKAnmMweh1a7sfmLdEFh&services=&t=20170220193356&s=1'
            // 'https://api.map.baidu.com/getscript?v=2.0&ak=V29KBqsuqkSdYt149xq0O0vGiYGYTfE9&s=1'
            , 'https://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js'
            , 'https://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js'
            , 'https://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js'
            , 'https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js'
            , 'https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js'
            , 'https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js'
        ];
        // 从索引i=0的文件开始引入，i++直到最后一个引入完成后回调callback
        loadScript(scriptArr, 0, function () {
            // 初始化map对象
            var map = new BMap.Map("allmap", {
                minZoom: 7,
                maxZoom: 18,
                enableMapClick: false
            });
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 7);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom();
            map.enableInertialDragging();
            map.enableContinuousZoom();

            // 左上角，添加比例尺
            var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
            //右上角，仅包含平移和缩放按钮
            var top_right_navigation = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_SMALL
            });
            //添加地图类型控件
            map.addControl(top_left_control);
            map.addControl(top_right_navigation);
            // map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            //点的集合
            var markers = [];
            var opts = {
                width : 250,     // 信息窗口宽度
                height: 80,     // 信息窗口高度
                title : "信息窗口" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };

            $.post("/service/map/shopList", function (data) {
                for (var i = 0; i < data.length; i++) {
                    if(data[i].shopPosition!=null && data[i].shopPosition.indexOf(",") > 0){
                        //添加门店的信息窗口
                        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                            '店名：' + data[i].shopName +
                            '<br>地址：' + data[i].address + '</div>';
                        // var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                        //     title: data.data[i].shopName,      //标题
                        //     width: 290,             //宽度
                        //     height: 105,              //高度
                        //     panel: "panel",         //检索结果面板
                        //     enableAutoPan: true,     //自动平移
                        //     searchTypes: [
                        //         // BMAPLIB_TAB_SEARCH,   //周边检索
                        //         // BMAPLIB_TAB_TO_HERE,  //到这里去
                        //         // BMAPLIB_TAB_FROM_HERE //从这里出发
                        //     ]
                        // });
                        //解析坐标
                        var zbArr = data[i].shopPosition.split(",");
                        var point = new BMap.Point(zbArr[0] * 1, zbArr[1] * 1);
                        var marker = new BMap.Marker(point);
                        // map.addOverlay(marker);               // 将标注添加到地图中
                        addClickHandler(content,marker);
                        markers.push(marker);
                    }
                }
                var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
            }, "json");

            var size = new BMap.Size(10, 20);
            map.addControl(new BMap.CityListControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: size
            }));

            //清除覆盖物
            function remove_overlay() {
                map.clearOverlays();
            }

            function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
            }

            function openInfo(content,e){
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            }
        });
    });
</script>